<script setup>
const props = defineProps({
  listData: {
    type: Array,
  },
  leftOrRight: {
    type: String,
    validator(v) {
      return ['left', 'right'].includes(v);
    },
  },
  checkedData: {
    type: Array,
    default: [],
  },
});
const emit = defineEmits(['setCheckData', 'setDragedItem']);

const dragedItem = (item) => {
  emit('setDragedItem', item);
};
</script>

<template>
  <div
    v-for="item in listData"
    :key="item.id"
    :class="['list-item', item.disabled ? 'disabled' : '']"
    :draggable="!item.disabled"
    @dragstart="dragedItem(item)">
    <label>
      <input type="checkbox" :checked="checkedData.includes(item)" @click="$emit('setCheckData', $event.target.checked, leftOrRight, item)" />{{
        item.phone_name
      }}</label
    >
  </div>
</template>

<style lang="less" scoped>
.list-item {
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 12px;
  color: #666;

  &.disabled {
    opacity: 0.6;
  }
}
</style>
